<template>
<!-- simple example -->
<!-- <basic-button type="bright" border width="200rpx" @click="handleClick" >测试按钮</basic-button> -->
  <button 
    class="we-button" 
    :openType="openType" 
    :class="[`we-button--${type}`,
      `we-button--${size}`,
      border ? 'we-button--border': '',
      disabled ? 'we-button--disabled': '']"
    :style="{width: width, height: height, 'border-radius': borderRadius}"
    @click.stop="handleClick">
    <view class="we-button-content">
       <slot></slot>      
    </view>
  </button>
</template>
<script>
export default {
  name: 'we-button',
  props: {
    size: { // small, normal, medium, large, full
      type: String,
      default: 'normal'
    },
    type: { // primary(实心绿), bright（空心绿）, plain（空心黑+边框）, info（空心灰+无边框）, cancel(空心灰+浅灰边框), tab(空心灰+深灰边框)
      type: String,
      default: 'primary'
    },
    border: { // 是否有边框
      default: false
    },
    width: { 
      type: String,
      default: '100%'
    },
    height: { 
      type: String,
      default: '60rpx'
    },
    borderRadius: {
      type: String,
      default: '39rpx'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    openType: null
  },
  data() {
    return {
    }
  },
  methods: {
    handleClick(e) {
      if (this.disabled) return
      this.$emit('click', e)
    }
  }
}
</script>
<style lang="less">
.we-button {
  box-sizing: border-box;
  text-align: center;
  margin:0;
  &:after{ border: none;}
  .flex;
  .flex-center;
  .flex-middle;
  &--small {
    font-size: 24rpx;
    height: 60rpx;
    border-radius: 8rpx;
    padding: 0 20rpx;
  }

  &--normal {
    font-size: 28rpx;
    height: 72rpx;
    border-radius: 8rpx;
    padding: 0 30rpx;
  }

  &--medium {
    font-size: 28rpx;
    height: 80rpx;
    border-radius: 8rpx;
  }

  &--large {
    font-size: 32rpx;
    height: 100rpx;
    border-radius: 8rpx;
  }

  &--full {
    font-size: 32rpx;
    height: 108rpx;
    border-radius: 0;
  }


  &--primary {
    background: @theme_color;
    color: #fff;
  }  

  &--bright{
    background: #fff;
    color: @theme_color;
    &.we-button--border {
      border: 1rpx solid @theme_color;
    }
  }

  &--plain {
    background: #fff;
    color: @font_color;
    &.we-button--border {      
      border: 1rpx solid #E7E7E7;
    }
  }

  &--info {
    background:inherit;
    color: #8A95AC;
  }

  &--cancel {
    background:inherit;
    color: #666666;
    &.we-button--border {      
      border: 1rpx solid #E7E7E7;
    }
  }

  &--tab{
    background:inherit;
    color: #666666;
    &.we-button--border {      
      border: 1rpx solid #999999;
    }
  }
  
  
  &.we-button--disabled {
    background: #DDDDDD;
    color: #8A95AC;
    box-shadow: none;

    &.we-button--border {
      border: 1rpx solid #8A95AC;
    }
  }
  .we-button-content{
    overflow: hidden;   
    white-space: nowrap;
    text-overflow: ellipsis; 
  }
}
</style>